<template>
  <div class="wrapper">
    <template v-for="(item,index) in items">
        <Circle 
          :percent="item.value"
          :stroke-color="item.color||'#2db7f5'"
          :stroke-width="item.width||6"
          :trail-width="item.width||5"
          :trail-color="item.trailColor||'#eaeef2'"
          :size="item.size||120">
            <slot :name="index">
                <span :style="{color:'white',fontSize:'24px',...item.style}">{{item.name}}</span>
            </slot>
        </Circle>
    </template>
  </div>
</template>

<script>
export default {
  name:'',
  components: {},
  data() {
    return {
    };
  },
  props: {
    items:{
        default:()=>{
            return []
        }
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style scoped>
.wrapper {
  background-color: #1c264c;
  width:100%;
  height:100%;
  display:flex;
  justify-content:space-around;
  align-items:center;
}
</style>